<template>
  <div class="worthBuyContainer">
    <Header :title="'值得买'"></Header>
    <div class="mainContainer">
      <div class="title">
        <img class="titleImg" src="@/assets/worthBuy-HL/worthBuy.png" alt="" />
        <div class="discribe">严选好物 用心生活</div>
      </div>

      <!-- 轮播图 -->
      <div class="swiperContainer">
        <van-swipe
          @change="onChange"
          class="mainSwiper"
          :loop="false"
          :width="90"
          :height="270"
        >
          <div class="swiper">
            <van-swipe-item
              class="swiperItem"
              v-for="(swiperList, index) in swiper"
              :key="index"
            >
              <div
                class="itemContent"
                v-for="(item, index) in swiperList"
                :key="item.id"
              >
                <div class="topImg">
                  <img :src="item.picUrl" alt="" />
                </div>
                <div class="mainText">{{ item.mainTitle }}</div>
                <div class="descText">{{ item.viceTitle }}</div>
              </div>
            </van-swipe-item>
          </div>
          <!-- 自定义指示器 -->
          <template #indicator>
            <div class="custom-indicator">
              <span
                class="pagination"
                :class="currentIndex === 0 && 'active'"
              ></span>
              <span
                class="pagination"
                :class="currentIndex === 1 && 'active'"
              ></span>
              <span
                class="pagination"
                :class="currentIndex === 2 && 'active'"
              ></span>
              <span
                class="pagination"
                :class="currentIndex === 3 && 'active'"
              ></span>
            </div>
          </template>
        </van-swipe>
      </div>
    </div>
    <div class="waterfall">
      <vue-waterfall-easy
        ref="waterfall"
        :imgsArr="imgsArr"
        @scrollReachBottom="getData"
      >
        <div class="info" slot-scope="props">
          <!-- props.value为遍历imgsArr中元素的值 -->
          <div class="topTitle">{{ props.value.title }}</div>
          <div class="bottomContainer">
            <div class="left">
              <img class="avatar" :src="props.value.avatar" alt="" />
              <div class="nickName">{{ props.value.nickname }}</div>
            </div>
            <div class="right">
              <img
                class="eyeIcon"
                src="../../assets/worthBuy-HL/eye.png"
                alt=""
              />
              <div class="readCount">{{ props.value.readCount }}</div>
            </div>
          </div>
        </div>
      </vue-waterfall-easy>
    </div>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy';
export default {
  name: 'WorthByu',
  components: {
    vueWaterfallEasy,
  },
  data() {
    return {
      currentIndex: 0,
      swiperAllList: [],
      swiper: [], //轮播图的项组成的数组

      page: 1,
      size: 2,
      imgsArr: [], //瀑布流内部属性，用来遍历的
    };
  },
  async mounted() {
    await this.getSwiperList();
    //拿到轮播图的项组成的数组，0-8,2-10,4-12,6-14
    for (let i = 0; i < 7; i++) {
      let obj = this.swiperAllList.slice(2 * i, 2 * i + 2);
      this.swiper.push(obj);
    }
    /*     //拿到轮播图的项组成的数组，0-8,2-10,4-12,6-14
        for (let i = 0; i < 4; i++) {
          let obj = this.swiperAllList.slice(2 * i, 2 * i + 8)
          this.swiper.push(obj)
        } */

    this.getData();
  },

  methods: {
    //切换轮播图分页指示器
    onChange(index) {
      this.currentIndex = index;
    },

    //轮播图数据
    async getSwiperList() {
      this.swiperAllList = await this.$store.dispatch('getSwiperList');
    },

    //瀑布流数据
    async getData() {
      const resultList = await this.$store.dispatch('getWaterfallList', {
        page: this.page,
        size: this.size,
      });
      const handlerList = resultList.map(item => {
        //   处理包含视频的那个对象
        let obj = {
          src: item.look.picUrl,
          title: item.look.title,
          nickname: item.look.nickname,
          avatar: item.look.avatar,
          readCount: item.look.readCount,
          videoUrl: item.look.lookPics[0].videoUrl,
        };
        // item.topics.push(obj)

        //   处理图片数组
        const handlerTopics = item.topics.map(item => ({
          src: item.picUrl,
          title: item.title,
          nickname: item.nickname,
          avatar: item.avatar,
          readCount: item.readCount,
        }));

        return {
          look: obj,
          topics: handlerTopics,
        };
      });

      //   console.log(handlerList);

      //将包含视频的那个对象添加到topics数组中
      const list = handlerList.map(item => {
        item.topics.push(item.look);
        return {
          topics: item.topics,
        };
      });
      //   console.log(list);
      this.page += 1;
      //合并数组，将每次请求回来的数据合并到imgsArr，
      this.imgsArr = this.imgsArr.concat(list[0].topics, list[1].topics);
    },
  },
};
</script>

<style lang="less" scoped>
.worthBuyContainer {
  height: 100%;
  background-color: #eeeeee;

  .mainContainer {
    background: #eeeeee url('../../assets/worthBuy-HL/bgc.jpg') no-repeat;
    width: 100%;
    background-size: 100% 300px;
    margin-top: 46px;
    .title {
      display: flex;
      height: 60px;
      align-items: flex-end;
      padding-left: 10px;
      .titleImg {
        width: 65px;
        height: 35px;
      }
      .discribe {
        font-size: 16px;
        color: #fff;
        margin-left: 5px;
        margin-bottom: 5px;
      }
    }

    .swiperContainer {
      width: 360px;
      height: 280px;
      background-color: #fff;
      margin: 8px auto;
      border-radius: 10px;

      ::v-deep .mainSwiper {
        .swiper {
          display: flex;

          .swiperItem {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            height: 270px;

            .itemContent {
              display: flex;
              flex-direction: column;
              align-items: center;

              width: 90px;
              height: 110px;
              .topImg {
                img {
                  height: 60px;
                  width: 60px;
                }
              }
              .mainText {
                font-size: 15px;
                font-weight: 700;
              }
              .descText {
                font-size: 12px;
                color: #999999;
              }
            }
          }
        }
        .custom-indicator {
          display: flex;
          align-items: center;
          position: relative;
          bottom: 0;
          margin: 0 auto;
          width: 80px;
          .pagination {
            width: 20px;
            height: 2px;
            background-color: #d9d9d9;

            &.active {
              background-color: #dd1a21;
            }
          }
        }
      }
    }
  }

  .waterfall {
    height: 800px;
    width: 100%;
    .info {
      padding: 10px;
      .topTitle {
        font-size: 15px;
        padding-bottom: 10px;
      }
      .bottomContainer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #7f7f7f;
        .left {
          display: flex;
          align-items: center;
          .avatar {
            height: 24px;
            width: 24px;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
        .right {
          display: flex;
          .eyeIcon {
            height: 16px;
            width: 16px;
            margin-right: 3px;
          }
        }
      }
    }
  }
  ::v-deep .img-box {
    img {
      border-top-right-radius: 6px;
      border-top-left-radius: 6px;
    }
  }
}
</style>
